<template>
  <div class="menu-content text-xs min-w-40">
    <template v-for="(menu, index) in menus" :key="menu.text">
      <li
        v-if="!menu.hide"
        class="menu-item text-center h-12 leading-12"
        @click.stop="(event:MouseEvent) => handleClickMenuItem(menu, event)"
        :class="{
          'overflow-hidden m-1 bg-light-400/50': menu.divider,
          'cursor-not-allowed': menu.disable,
          'border-b': index + 1 !== menus.length,
        }"
      >
        <div
          v-if="!menu.divider"
          class="menu-item-content flex justify-center items-center whitespace-nowrap"
          hover="bg-dark-800/9"
          :class="{}"
        >
          <span
            class="text mr-2"
            :title="`快捷键: ${
              menu.subText && !menu.children ? menu.subText : ''
            }`"
            >{{ menu.text }}</span
          >
          <!-- <span v-if="menu.subText && !menu.children" class="opacity-60">{{
            menu.subText
          }}</span> -->

          <menu-content
            v-if="menu.children && menu.children.length"
            class="sub-menu"
            :menus="menu.children"
            :handleClickMenuItem="handleClickMenuItem"
          />
        </div>
      </li>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ContextmenuItem } from './types';

defineProps<{
  menus: Array<ContextmenuItem>;
  handleClickMenuItem: Function;
}>();
</script>

<style scoped>
@transitionDelayFast: 0.1s;
@themeColor: #d14424;
@transitionDelay: 0.2s;
.menu-content {
  background-color: #fffcfc;
  border: 1px solid #eee;
  box-shadow: 3px 3px 3px rgba(#000, 0.15);
  border-radius: 2px;
  list-style: none;
  margin: 0;
}
</style>
